<template>
    <el-cascader v-model="slval" :options="options" :props="defaultProps" placeholder="选择区域" :disabled='disabled' @change="handleChange" :style="{width}"/>
</template>

<script setup>
import {ref,reactive,onMounted,watch} from "vue"
import areaLists from '@/api/area'
import {getTenArea} from '@/api/plant'
//console.log("areaLists:",areaLists)

const props = defineProps({
    modelValue:'',
    disabled:{
        type: Boolean,
        default(){
            return false  // 默认
        }
    },
    width:{
        type:String,
        default:'100%'
    }
})
const emit = defineEmits(['change','update:modelValue'])

const slval = ref('')
const options = ref([])
const defaultProps = reactive({
    children: 'children',
    label: 'fullname',
    value:'fullname' //code
})

watch(()=>props.modelValue,(n,o)=>{
    slval.value = n
})

onMounted(()=>{
    getTenArea().then(res=>{
        let province_list = res.data.result[0] // 所有省份
        let city_list = res.data.result[1] // 所有城市（不分省份）
        let area_list = res.data.result[2] // 所有区域（不分省份、城市）
        //options.value = res.data.result[0]
        console.log(province_list)
        province_list.forEach(item => {
            let cur_province = item // 当前省份
            const start = cur_province.cidx[0] // 当前省份对应的城市在city_list数组中的开始下标
            const end = cur_province.cidx[1] // 当前省份对应的城市在city_list数组中的介绍下标
            let cur_province_citys = []  // 当前省份下的所有城市
            for(let i=start;i<=end;i++){
                cur_province_citys.push(city_list[i])
            }
            // 把查找到的所有城市放到当前省份下的children中
            cur_province.children = cur_province_citys
            options.value.push(cur_province)  
        });

        console.log("options.value:",options.value)
    })
    
    //options.value = areaLists
})

const handleChange = (value) => {
  //console.log(value)
  emit('update:modelValue',value) 
  if(value && value.length>0){
    emit('change',{province:value[0],city:value[1],area:value[2]})
  }else{
    emit('change','')
  }
}


</script>